<template>
  <div class="space-y-6">
    <!-- 欢迎区域 -->
    <div class="bg-white rounded-xl shadow-sm p-6">
      <h2 class="text-2xl font-bold text-gray-900 mb-2">欢迎回来！</h2>
      <p class="text-gray-600">今天的工作开始了，查看最新的运营数据</p>
    </div>

    <!-- 数据概览 -->
    <div class="grid grid-cols-2 gap-4">
      <div class="bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-xl p-4 shadow-sm">
        <div class="text-sm opacity-90">总站点数</div>
        <div class="text-2xl font-bold mt-1">{{ stats.totalStations }}</div>
      </div>
      
      <div class="bg-gradient-to-r from-green-500 to-green-600 text-white rounded-xl p-4 shadow-sm">
        <div class="text-sm opacity-90">今日订单</div>
        <div class="text-2xl font-bold mt-1">{{ stats.todayOrders }}</div>
      </div>
      
      <div class="bg-gradient-to-r from-purple-500 to-purple-600 text-white rounded-xl p-4 shadow-sm">
        <div class="text-sm opacity-90">今日收入</div>
        <div class="text-2xl font-bold mt-1">¥{{ stats.todayIncome }}</div>
      </div>
      
      <div class="bg-gradient-to-r from-orange-500 to-orange-600 text-white rounded-xl p-4 shadow-sm">
        <div class="text-sm opacity-90">在线设备</div>
        <div class="text-2xl font-bold mt-1">{{ stats.onlineDevices }}</div>
      </div>
    </div>

    <!-- 快捷操作 -->
    <div class="bg-white rounded-xl shadow-sm p-6">
      <h3 class="text-lg font-semibold text-gray-900 mb-4">快捷操作</h3>
      <div class="grid grid-cols-2 gap-4">
        <button @click="goTo('/station-management')" class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-brand-500 hover:bg-brand-50 transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 text-brand-600 mr-3">
            <path d="M11.7 2.3a1 1 0 0 1 1.6 0l8 10.4a1 1 0 1-1.6H4.5a1 1 0 0 1-.8-1.6l8-10.4Z"/>
            <path d="M3 22a1 1 0 0 1 1-1h16a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1Z"/>
          </svg>
          <div class="text-left">
            <div class="font-medium text-gray-900">站点管理</div>
            <div class="text-sm text-gray-500">查看和管理充电站</div>
          </div>
        </button>
        
        <button @click="goTo('/order-management')" class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-brand-500 hover:bg-brand-50 transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 text-brand-600 mr-3">
            <path d="M3.375 3C2.339 3 1.5 3.84 1.5 4.875v.75c0 1.036.84 1.875 1.875 1.875h17.25c1.035 0 1.875-.84 1.875-1.875v-.75C22.5 3.839 21.66 3 20.625 3H3.375z"/>
            <path fill-rule="evenodd" d="m3.087 9 .54 9.176A3 3 0 0 0 6.62 21h10.757a3 3 0 0 0 2.995-2.824L20.913 9H3.087zm6.163 3.75A.75.75 0 0 1 10 12h4a.75.75 0 0 1 0 1.5h-4a.75.75 0 0 1-.75-.75z" clip-rule="evenodd"/>
          </svg>
          <div class="text-left">
            <div class="font-medium text-gray-900">订单管理</div>
            <div class="text-sm text-gray-500">处理充电订单</div>
          </div>
        </button>
      </div>
    </div>

    <!-- 最近活动 -->
    <div class="bg-white rounded-xl shadow-sm p-6">
      <h3 class="text-lg font-semibold text-gray-900 mb-4">最近活动</h3>
      <div class="space-y-3">
        <div v-for="activity in recentActivities" :key="activity.id" class="flex items-center p-3 bg-gray-50 rounded-lg">
          <div class="w-2 h-2 bg-brand-500 rounded-full mr-3"></div>
          <div class="flex-1">
            <div class="text-sm text-gray-900">{{ activity.message }}</div>
            <div class="text-xs text-gray-500">{{ activity.time }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const stats = ref({
  totalStations: 15,
  todayOrders: 243,
  todayIncome: '1,845.60',
  onlineDevices: 86
})

const recentActivities = ref([
  { id: 1, message: '新站点 "科技园区充电站" 已上线', time: '5分钟前' },
  { id: 2, message: '用户 "张三" 完成充电订单 #20241112001', time: '15分钟前' },
  { id: 3, message: '设备 "D1001" 状态异常，已发送维护通知', time: '1小时前' },
  { id: 4, message: '系统数据备份完成', time: '2小时前' }
])

const goTo = (path) => {
  router.push(path)
}
</script>